<!-- 标签页 -->
<template>
    <div class="box">
        <template v-for="(item, index) in openTags" :key="item.fullPath">
            <el-dropdown trigger="contextmenu" @contextmenu.native="hiddenDrop" @command="handlerCommand">
                <span class="el-dropdown-link">
                    <el-tag :class="{ 'actvie': item.fullPath == route.fullPath }"
                        :closable="item.fullPath != '/index/dashboard'" type="info" @click="skipRoute(index)"
                        @close="remove(index)" sable-transitions="false">
                        <el-icon v-if="item.fullPath == route.fullPath">
                            <LocationFilled />
                        </el-icon>
                        <span>{{ $t(item.title as string) }}</span>
                    </el-tag>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="RefreshRight"
                            :command="{ code: 1, fullPath: item.fullPath }">{{$t('tag.refresh')}}</el-dropdown-item>
                        <el-dropdown-item :icon="Close" :command="{ code: 2, fullPath: item.fullPath }"
                            :disabled="index == openTags.length - 1 || openTags.length == 1">{{$t('tag.closerighttag')}}</el-dropdown-item>
                        <el-dropdown-item :icon="CircleClose" :command="{ code: 3, fullPath: item.fullPath }"
                            :disabled="openTags.length == 1">{{$t('tag.closeall')}}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch,computed } from 'vue'
import { LocationFilled, RefreshRight, Close, CircleClose } from '@element-plus/icons-vue'
import { useRoute, useRouter, type RouteLocationNormalizedLoaded } from "vue-router";
import { useTagsStore } from "@/stores/tags";
//路由
const route = useRoute()
//路由器
const router = useRouter()
const store = useTagsStore()
//自定义数组
const openTags = computed(()=>store.tagList);

console.log(openTags);

//监听
watch(route, (route) => {
    if('Index'!=route.matched[0].name){
        return
    }
    let index = -1;
    if('GoodsCreate'===route.name || 'GoodsEdit'===route.name){
        let findIndex  = openTags.value.findIndex(item=>'GoodsList'===item.name);
        if(-1!==findIndex){
            index = findIndex + 1;
        }
    }
    console.log();
    
    store.pushTag(route,index)
})
if('Index'==route.matched[0].name){
     store.pushTag(route)
}

//点击切换路由和样式
const skipRoute = (index: number) => {
    store.clickTag(index)
}
//删除标签
const remove = (index: number) => {
    store.removeTag(index)
}
//菜单项点击处理事件
const handlerCommand = ({ code, fullPath }: { code: number, fullPath: string }) => {
    let open_Tags = openTags.value
    switch (code) {
        case 1: //刷新
        let refreshIndex = open_Tags.findIndex((item=>item.fullPath==fullPath))
        store.refresh(refreshIndex)
            break;
        case 2:  //关闭右侧标签
        let index = open_Tags.findIndex((item=>item.fullPath==fullPath))
        store.closeRight(index)
            break;
        case 3:  //关闭所有
        store.closeAll()
            break;
        default:
            break;
    }
}

//拦截下拉菜单弹出
const hiddenDrop = () => {
    document.body.click()
}
</script>
<style lang="less">
.box {
    display: flex;
    align-items: center;

    .el-tag {
        background-color: white;
        border-radius: 0px;
        height: 32px;
        color: #5b5b5e;
        border: 1px solid #b7b9c0;
        ;
        margin: 0px 6px;

        .el-tag__content {
            display: flex;
            align-items: center;

            .el-icon {
                margin-right: 5px;
            }
        }
    }

    .el-tag .el-tag__close {
        color: rgb(223, 213, 213);
    }

    .actvie {
        background-color: #409EFF;
        color: white !important;
        border: 0px;
    }
}
</style>